<template>
  <view class="prompt-card">
    <view class="t-title">{{ title || "温馨提示" }}</view>
    <view class="t-text">{{
      content || "联系次数不足，可通过以下方式获取，即可无限解锁对方联系方式"
    }}</view>
    <view class="t-tips" v-if="tips">{{ tips }}</view>

    <!-- 无联系次数弹窗提示 -->
    <template v-if="isNoNum">
      <div class="prompt-btns">
        <custom-btn class="video-btn" :class="advnum ? '' : 'video-disabled'" @click="videoFn" v-if="adStatus">
          <image :src="videoIcon" mode="scaleToFill" class="video-icon" />
          看视频({{advnum}})
        </custom-btn>
        <custom-btn class="buy-btn" :style="adStatus ? '' :'width: 100%'" @click="buyFn">去购买</custom-btn>
      </div>
    </template>

    <!-- 其他提示 -->
    <view class="t-btn" @click="closeFn" v-else><custom-btn>{{ btnText }}</custom-btn></view>
  </view>
</template>

<script setup>
import videoIcon from "@/static/common/video.svg";
import useStore from "@/store";
const { common } = useStore();

const title = computed(() => common.promptParams?.title);
const content = computed(() => common.promptParams?.content);
const tips = computed(() => common.promptParams?.tips);
const handleFn = computed(() => common.promptParams?.handleFn);
const btnText = computed(() => common.promptParams?.btnText);
const isNoNum = computed(() => common.promptParams?.isNoNum);
const advnum = computed(() => common.promptParams?.advnum);

const adStatus = computed(() => common.adStatus);

const closeFn = () => {
  handleFn.value();
  common.updatePopupOpen(false, common.popupType);
};

const buyFn = () => {
  common.updatePopupOpen(false, "prompt");
  setTimeout(() => {
    uni.navigateTo({ url: "/subPages/purchase/index" });
  }, 100);
};

const videoFn = () => {
  if (!advnum.value) {
    uni.showToast({
      title: "今日看视频次数已用完",
      icon: "none",
    });
    return;
  }
  const len = getCurrentPages()?.length;
  const path = getCurrentPages()[len - 1].route;
  const curPage = path.split("/")[1];
  common.openAdCase(curPage);
};
</script>

<style lang="scss" scoped>
.prompt-card {
  background: #ffffff;
  border-radius: 30rpx;
  padding: 60rpx 40rpx;
  text-align: center;
  width: 650rpx;
  @include borderBox;
  .t-title {
    font-weight: 800;
    font-size: 44rpx;
    color: #000;
    padding-bottom: 40rpx;
  }
  .t-text,
  .t-tips {
    font-weight: 500;
    font-size: 36rpx;
    color: #666;
    line-height: 60rpx;
  }
  .t-btn {
    width: 400rpx;
    height: 120rpx;
    line-height: 120rpx;
    background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    box-shadow: 0rpx 20rpx 40rpx 0rpx rgba(241, 55, 64, 0.25);
    border-radius: 120rpx;
    color: #fff;
    font-size: 40rpx;
    font-weight: bold;
    margin: 0 auto;
    margin-top: 40rpx;
  }

  .prompt-btns {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 40rpx;
  }

  .video-icon {
    width: 60rpx;
    height: 60rpx;
    margin-bottom: -5rpx;
  }

  .video-btn {
    width: 280rpx;
    height: 120rpx;
    background: linear-gradient(180deg, rgba(74, 97, 255, 0.9) 0%, #4a61ff 100%);
    border-radius: 120rpx;
    color: #fff;
    font-size: 40rpx;
    line-height: 120rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .video-disabled {
    opacity: 0.5;
  }

  .buy-btn {
    width: 280rpx;
    height: 120rpx;
    background: linear-gradient(180deg, rgba(241, 55, 64, 0.9) 0%, #f13740 100%);
    border-radius: 120rpx;
    color: #fff;
    font-size: 40rpx;
    line-height: 120rpx;
  }
}
</style>
